import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Navigate, Outlet, useNavigate } from 'react-router-dom';
const { Header, Sider, Content } = Layout;
export default function Home() {
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate()

    return (
        <div><Layout style={{ height: "100vh" }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu onClick={(e) => {
                    navigate(e.key)
                }}
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={[
                        {
                            key: '/home/index',
                            icon: <UserOutlined />,
                            label: '首页',
                        },
                        {
                            key: '/home/manageone',
                            icon: <VideoCameraOutlined />,
                            label: '1管理',
                        },
                        {
                            key: '/home/managetwo',
                            icon: <UploadOutlined />,
                            label: '管理',
                        },
                        {
                            key: '/home/manageq',
                            icon: <UploadOutlined />,
                            label: '管理',
                        },
                        {
                            key: '/home/managew',
                            icon: <UploadOutlined />,
                            label: '管理',
                        },
                        {
                            key: '/home/manager',
                            icon: <UploadOutlined />,
                            label: '管理',
                        }, {
                            key: '/home/managet',
                            icon: <UploadOutlined />,
                            label: '管理',
                        },
                    ]}
                />
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }}>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </Layout></div>
    )
}
